import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import Form, { useForm } from 'form-render';
import widgetsMap from './widgets-map';
import DetailColumnText from './commom/detail-column-text';
import './index.less';

const FormRender = forwardRef((props: any, ref) => {
  const { form, schema } = props;
  const renderMode: string = props.renderMode || 'edit';

  const formData = form.getValues();
  // console.log('formData:', formData, props.schema);

  const getDetailData = (schema: any) => {
    if (typeof schema !== 'object' || schema === null) {
      return [];
    }
    const values = form.getValues();
    const properties = schema.properties || {};
    const keys = Object.keys(properties);
    const data = keys.map((key) => {
      // console.log(key);
      const item = properties[key];
      return {
        label: item.title,
        value: values[key] || 'test'
      };
    });
    return data;
  };

  const data = getDetailData(schema || {});
  // console.log('data:', data);

  useEffect(() => {
    console.log('%cschema------------{}', 'color:red;font-weight:bold', schema);
  }, [schema]);
  console.log('widgetsMap',widgetsMap);
  
  return (
    <div className="form-render-container">
      {renderMode === 'edit' ? (
        <Form widgets={widgetsMap} {...props} />
      ) : (
        <>
          {data.map((item: any, index: number) => {
            return <DetailColumnText data={item} key={index} />;
          })}
        </>
      )}
    </div>
  );
});

export default FormRender;
